<html xmlns:AI>
	<head>
		<?import namespace="AI" implementation="aiArrows.htc" />
		<?import namespace="AI" implementation="aiButton.htc" />
		<?import namespace="AI" implementation="aiColors.htc" />
		<link href="dialog.css" rel="stylesheet" type="text/css">
		<title>Insert Table</title>
		<style>
	.AIPrev {
		border: 1.5pt inset;
		width: 216px;
		height: 216px;
		padding: 8px;
		margin: 8px;
		overflow: scroll;
		text-align: center;
		vertical-align: top;
	}
		</style>
		<script>
			var d = document;
			var args = window.dialogArguments;
			var table;
			var temp;
			var whichcol;
			var cell;
			var mtx;

			if( args ) {
				table = args;
			} else {
				table = d.createElement( '<table style="width:180px;height:180px" cellspacing="4" cellpadding="4" border="1"></table>' );
				var r1 = table.insertRow();
				r1.insertCell();
				r1.insertCell();
				var r2 = table.insertRow();
				r2.insertCell();
				r2.insertCell();
			}
			
			
			window.onload = function() {

				// init
				
				arr_rsp.disable();
				arr_csp.disable();

				// set table values
				
				rc.value = table.rows.length;
				
				table.maxcols = 0;
				for( var i = 0; i < table.rows.length; i++ ) {
					var mx = 0;
					for( var j = 0; j < table.rows[i].cells.length; j++ ) {
						mx += parseInt( table.rows[i].cells[j].colSpan );
					}
					if( mx > table.maxcols ) {
						table.maxcols = mx;
					}
				}								

				aiPrev.innerHTML = table.outerHTML.replace( /(<td\s*?.*?>).*?<\/td>/gi, '$1&nbsp;</td>' );
				aiCopy.innerHTML = table.outerHTML;
				temp = aiPrev.children(0);
				table = aiCopy.children(0);
				temp.style.height = 180;
				temp.style.width = 180;
				
				mtx = new Array( temp.rows.length );
				for( var i = 0; i < temp.rows.length; i++ ) {
					mtx[i] = new Array( temp.maxcols );
					for( var j = 0; j < temp.maxcols; j++ ) {
						mtx[i][j] = 0;
					}
				}
				for( var i = 0; i < temp.rows.length; i++ ) {
					for( var j = 0; j < temp.rows[i].cells.length; j++ ) {
						for( var k = 1; k < temp.rows[i].cells[j].colSpan; k++ ) {
							for( var l = j + k; l < temp.maxcols; l++ ) {
								mtx[i][l] += 1;
							}
						}
						for( var m = 1; m < temp.rows[i].cells[j].rowSpan; m++ ) {
							for( var k = 0; k < temp.rows[i].cells[j].colSpan; k++ ) {
								for( var l = j + k; l < temp.maxcols; l++ ) {
									mtx[i+m][l] += 1;
								}
							}
						}
					}
				}
				for( var i = 0; i < temp.cells.length; i++ ) {
					temp.cells(i).onclick = highlight;
				}

				cc.value = table.maxcols;
				cs.value = table.cellSpacing;
				cp.value = table.cellPadding;
				bs.value = table.border;
				bc.value = table.borderColor;
				bg.value = table.bgColor;
				tw.value = parseInt( table.style.width ) || parseInt( table.width ) || 0;
				th.value = parseInt( table.style.height ) || parseInt( table.height ) || 0;
				var re = /%$/;
				twu.selectedIndex = re.exec( table.style.width ) || re.exec( table.width ) ? 1 : 0;
				thu.selectedIndex = re.exec( table.style.height ) || re.exec( table.height ) ? 1 : 0;
				select_option( table.align, ali );
				select_option( table.rules, rul );
				select_option( table.frame, fra );
				checkColor( bs.value );
				

				// set event handlers

				rc.onchange = function() {
					var dif = rc.value - temp.rows.length;
					if( dif > 0 ) {
						for( var i = 0; i < dif; i++ ) {
							var tr = temp.insertRow();
							var tr2 = table.insertRow();
							mtx.push( new Array() );
							for( var j = 0; j < temp.maxcols; j++ ) {
								add_cell( tr );
								tr2.insertCell();
								mtx[ mtx.length -1 ].push( 0 );
							}
						}
					} else {
						for( var i = 0; i < Math.abs( dif ); i++ ) {
							temp.deleteRow();
							table.deleteRow();
							mtx.pop();
						}
						cell && cell.parentElement || disable_cell();
					}
				}
				cc.onchange = function() {
					var dif = cc.value - temp.maxcols;
					if( dif > 0 ) {
						for( var i = 0; i < dif; i++ ) {
							for( var j = 0; j < temp.rows.length; j++ ) {
								add_cell( temp.rows[j] );
								table.rows[j].insertCell();
								mtx[j].push( mtx[j][ temp.maxcols - 1 ] );
							}
						}
					} else {
						for( var i = 0; i < Math.abs( dif ); i++ ) {
							for( var j = 0; j < temp.rows.length; ) {
								jp = temp.rows[j].cells[ temp.rows[j].cells.length - 1 ].rowSpan - 1;
								if( temp.rows[j].cells[ temp.rows[j].cells.length - 1 ].colSpan > 1 ) {
									temp.rows[j].cells[ temp.rows[j].cells.length - 1 ].colSpan -= 1;
									table.rows[j].cells[ temp.rows[j].cells.length - 1 ].colSpan -= 1;
								} else {
									temp.rows[j].deleteCell();
									table.rows[j].deleteCell();
								}
								for( var k = 0; k <= jp; k++ ) {
									mtx[j++].pop();
								}
							}
						}
					}
					cell && cell.parentElement || disable_cell();
					temp.maxcols = cc.value;
				}
				cp.onchange = function() {
					temp.cellPadding = cp.value;
				}

				cs.onchange = function() {
					temp.cellSpacing = cs.value;
				}

				bs.onchange = function() {
					temp.border = bs.value;
					checkColor( this.value );
				}

				bc.onchange = function() {
					temp.borderColor = bc.value;
				}

				bg.onchange = function() {
					temp.bgColor = bg.value;
				}

				csp.onchange = function() {
					var cx = cell.cellIndex;
					var rx = cell.parentElement.rowIndex;
					var fr = parseInt( cell.colSpan );
					var to = parseInt( this.value ) || 1;
					
					var pr = 0;
					var ix = 0;
					var mx = -1;
					var ct = 0;
					while( ct <= cx ) {
						if( mtx[rx][ix] == pr ) { ct++; }
						mx++;
						pr = mtx[rx][ix++];
					}

					if( fr < to ) {
						if( cx + to > temp.maxcols ) {
							this.value = fr;
							return;
						}

						for( var r = 0; r < cell.rowSpan; r++ ) {
							for( var c = fr; c < to; c++ ) {
								temp.rows[ rx + r ].deleteCell( mx - mtx[ rx + r ][ mx ] + 1 );
								table.rows[ rx + r ].deleteCell( mx - mtx[ rx + r ][ mx ] + 1 );
								for( var d = mx + c; d < temp.maxcols; d++ ) {
									mtx[ rx + r ][ d ] += 1;
								}
							}
						}
					} else {
						for( var r = 0; r < cell.rowSpan; r++ ) {
							for( var c = fr - to; c >= 1; c-- ) {
								add_cell( temp.rows[ rx + r ], mx - mtx[ rx + r ][ mx ] + 1 );
								table.rows[ rx + r ].insertCell( mx - mtx[ rx + r ][ mx ] + 1 );
								for( var d = mx + c; d < temp.maxcols; d++ ) {
									mtx[ rx + r ][ d ] -= 1;
								}
							}
						}
					}
					
					cell.colSpan = this.value;
					table.rows[ rx ].cells[ cx ].colSpan = this.value;
				}

				rsp.onchange = function() {
					var cx = cell.cellIndex;
					var rx = cell.parentElement.rowIndex;
					var fr = parseInt( cell.rowSpan );
					var to = parseInt( this.value ) || 1;
					
					var pr = 0;
					var ix = 0;
					var mx = -1;
					var ct = 0;
					while( ct <= cx ) {
						if( mtx[rx][ix] == pr ) { ct++; }
						mx++;
						pr = mtx[rx][ix++];
					}

					if( fr < to ) {
						if( rx + to > temp.rows.length ) {
							this.value = fr;
							return;
						}
						
						for( var r = fr; r < to; r++ ) {
							for( var c = 0; c < cell.colSpan; c++ ) {
								temp.rows[ rx + r ].deleteCell( mx - mtx[ rx + r ][ mx + c ] );
								table.rows[ rx + r ].deleteCell( mx - mtx[ rx + r ][ mx + c ] );
								mtx[ rx + r ][ mx + c ] += c + 1;
							}
							for( var c = mx + cell.colSpan; c < temp.maxcols; c++ ) {
								mtx[ rx + r ][ c ] += parseInt( cell.colSpan );
							}
						}
					} else {
						for( var r = fr - 1; r >= to; r-- ) {
							for( var c = 0; c < cell.colSpan; c++ ) {
								add_cell( temp.rows[ rx + r ], mx - mtx[ rx + r ][ mx ] + 1 );
								table.rows[ rx + r ].insertCell( mx - mtx[ rx + r ][ mx ] + 1 );
								mtx[ rx + r ][ mx + c ] -= c + 1;
							}
							for( var c = mx + cell.colSpan; c < temp.maxcols; c++ ) {
								mtx[ rx + r ][ c ] -= parseInt( cell.colSpan );
							}
						}
					}
					
					cell.rowSpan = this.value;
					table.rows[ rx ].cells[ cx ].rowSpan = this.value;
				}

				rul.onchange = function() {
					temp.rules = rul.options[rul.selectedIndex].text;
				}

				fra.onchange = function() {
					temp.frame = fra.options[fra.selectedIndex].text;
				}
				
				ali.onchange = function() {
					temp.align = ali.options[ali.selectedIndex].text;
				}

				btnBgColor.oncommand = color;
				btnColor.oncommand = color;

				dlgCol.onchoose = function( e ) {
					if( whichcol ) {
						bg.value = e.color;
						temp.bgColor = bg.value;
					} else {
						bc.value = e.color;
						temp.borderColor = bc.value;
					}
					dlgCol.hide();
				}

				var inp = d.getElementsByTagName( 'INPUT' );
				for( var i = 0; i < inp.length; i++ ) {
					inp[i].onkeypress = check_numeric;
				}
				bc.onkeypress = '';
				bg.onkeypress = '';
			}
			
			// event handlers

			function cancel() {
				returnValue = null;
				close();
			}

			function color( e ) {
				elt = e.srcElement;
				whichcol = elt == btnColor ? 0 : 1;
				if( dlgCol.on ) {
					dlgCol.hide();
				} else {
					dlgCol.style.left = 130;
					dlgCol.style.top = elt == btnColor ? 170 : 110;
					dlgCol.show();
				}
			}

			function insert() {
				with( table ) {
					if( bs.value == '0' ) {
						className = 'AINoBorder';
						border = 0;
					} else {
						className = '';
						border = parseInt( bs.value ) || border;
						borderColor = temp.borderColor;
					}
					align = temp.align;
					rules = temp.rules;
					frame = temp.frame;
					bgColor = temp.bgColor;
					cellPadding = temp.cellPadding;
					cellSpacing = temp.cellSpacing;
					style.width = parseInt( tw.value ) ? tw.value + twu.options[twu.selectedIndex].text : style.width;
					style.height = parseInt( th.value ) ? th.value + thu.options[thu.selectedIndex].text : style.height;
					returnValue = outerHTML;
				}
				close();
			}
			
			function checkColor( v ) {
				if( v > 0 ) {
					btnColor.enable();
					bc.disabled = false;
					bc.style.backgroundColor = '';
					temp.borderColor = bc.value;
				} else {
					btnColor.disable();
					bc.disabled = true;
					bc.style.backgroundColor = 'buttonface';
					temp.border = 1;
					temp.borderColor = 'inactiveborder';
				}
			}
			
			function check_numeric() {
				var k = event.keyCode;
				if(  k < 48 || k > 57 ) {
					return false;
				}
			}

			function highlight() {
				cell && ( cell.runtimeStyle.backgroundColor = '' );
				this.runtimeStyle.backgroundColor = 'highlight';
				rsp.value = this.rowSpan;
				csp.value = this.colSpan;
				if( ! cell ) {
					rsp.disabled = false;
					csp.disabled = false;
					rsp.style.backgroundColor = '';
					csp.style.backgroundColor = '';
					arr_rsp.enable();
					arr_csp.enable();
				}
				cell = this;
			}
			
			//  helpers
			
			function add_cell( v, w ) {
				w = isNaN( parseInt( w ) ) ? -1 : w;
				var c = v.insertCell( w );
				c.innerText = ' ';
				c.onclick = highlight;
				return c;
			}

			function disable_cell() {
				cell = null;
				arr_rsp.disable();
				arr_csp.disable();
				rsp.disabled = true;
				csp.disabled = true;
				rsp.value = '';
				csp.value = '';
				rsp.style.backgroundColor = 'buttonface';
				csp.style.backgroundColor = 'buttonface';
			}

			function select_option( v, w ) {
				for( var i = 0; i < w.options.length; i++ ) {
					if( w.options[i].text == v ) {
						w.options[i].selected = true;
					}
				}
			}

			function show_mtx() {
				var str = '';
				for( var i = 0; i < mtx.length; i++ ) {
					for( var j = 0; j < mtx[i].length; j++ ) {
						str += mtx[i][j] + ' ';
					}
					str += "\n";
				}
				alert( str );
			}
		</script>
	</head>
	<body>
		<AI:AIColors unselectable="on" id="dlgCol" on="0" style="position:absolute;zindex=100" />
		<table cellspacing="0" cellpadding="1">
			<tr>
				<td colspan="2" class="title">:: rows :: columns ::</td>
			</tr>
			<tr>
				<td>
					<div id="aiPrev" class="AIPrev"></div>
					<div id="aiCopy" style="display:none"></div>
				</td>
				<td height="130">
					<table>
						<tr>
							<td align="right">
								rows :
							</td>
							<td>
								<input id="rc" size="2" maxlength="2"><AI:AIArrows target="rc" min="1" />
							</td>
						</tr>
						<tr>
							<td align="right" class="line">
								rowspan :
							</td>
							<td class="line">
								<input id="rsp" size="2" maxlength="2" disabled="true" style="background-color:buttonface"><AI:AIArrows id="arr_rsp" target="rsp" min="1" />
							</td>
						</tr>
						<tr>
							<td align="right">
								columns : 
							</td>
							<td>
								<input id="cc" size="2" maxlength="2"><AI:AIArrows target="cc" min="1" />
							</td>
						</tr>
						<tr>
							<td class="line" align="right">
								colspan : 
							</td>
							<td class="line">
								<input id="csp" size="2" maxlength="2" disabled="true" style="background-color:buttonface"><AI:AIArrows id="arr_csp" target="csp" min="1" />
							</td>
						</tr>
						<tr>
							<td align="right">
								cellpadding :
							</td>
							<td>
								<input id="cp" size="2" maxlength="2"><AI:AIArrows target="cp" min="0" />
							</td>
						</tr>
						<tr>
							<td align="right">
								cellspacing :
							</td>
							<td>
								<input id="cs" size="2" maxlength="2"><AI:AIArrows target="cs" min="0" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2" class="title">:: table properties ::</td>
			</tr>
			<tr>
				<td colspan="2">
					<table>
						<tr>
							<td align="right">
								width : 
							</td>
							<td>
								<input id="tw" size="2" maxlength="3">
								<select id="twu">
									<option>px
									<option>%
								</select>
							</td>
							<td align="right">
								alignment : 
							</td>
							<td>
								<select id="ali">
									<option>
									<option>left
									<option>center
									<option>right
								</select>
							</td>
						</tr>
						<tr>
							<td align="right">
								height : 
							</td>
							<td>
								<input id="th" size="2" maxlength="3">
								<select id="thu">
									<option>px
									<option>%
								</select>
							</td>
							<td align="right">
								background :
							</td>
							<td>
								<input id="bg" size="16"><AI:AIButton id="btnBgColor" cmd="Color" alt="Choose Color..." src="img/ico_color.gif" autoOff="1" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2" class="title">:: border ::</td>
			</tr>
			<tr>
				<td colspan="2">
					<table>
						<tr>
							<td align="right">
								border size :
							</td>
							<td>
								<input id="bs" size="2" maxlength="2"><AI:AIArrows target="bs" min="0" />
							</td>
							<td align="right">
								border color :
							</td>
							<td>
								<input id="bc" size="16"><AI:AIButton id="btnColor" cmd="Color" alt="Choose Color..." src="img/ico_color.gif" autoOff="1" />
							</td>
						</tr>
						<tr>
							<td align="right">
								rules :
							</td>
							<td>
								<select id="rul">
									<option>
									<option>all
									<option>cols
									<option>groups
									<option>none
									<option>rows
								</select>
							</td>
							<td align="right">
								frame :
							</td>
							<td>
								<select id="fra">
									<option>
									<option>above
									<option>below
									<option>box
									<option>border
									<option>hsides
									<option>lhs
									<option>rhs
									<option>void
									<option>vsides
								</select>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" style="text-align:center;" value=":: cancel ::" onclick="cancel()">
					<input type="button" style="text-align:center;" value=":: insert ::" onclick="insert()">
				</td>
			</tr>
		</table>
	</body>
</html>